<template>
  <div class="container" style="height: 100vh;width: 300px;padding: 20px;box-sizing: border-box;width: 100%;">
    <header>
      <MBreadcrumb :item="breadcrumbItem" />
    </header>
    <main>
      <div style="display: flex;margin-top: 20px;">
        <div style="width: 20px;height: 140px;line-height: 140px;" @click="turnLeft">《</div>
        <div style="flex: 1 1 100px;text-align: center;"><img :src="base64Image" alt="Base64 Image"></div>
        <div style="width: 20px;height: 140px;line-height: 140px;" @click="turnRight">》</div>
      </div>
      <MTitle class="title">
        <template #left>
          基本参数
        </template>
      </MTitle>
      <table id="attributeTable" class="mtable">
        <tr v-for="(obj, index) in MListItem" :key="index" class="mtr">
          <td class="field">{{ obj.field }}</td>
          <td class="value" v-if="obj.field !== '液晶屏' && obj.field !== '标识码'">
            {{ obj.value }}
          </td>
          <td class="value" v-if="obj.field == '液晶屏'" style="display: flex;">
            <div style="flex: 1 1 100px;">
              {{ obj.value }}
            </div>
            <div style="width: 26px;height: 26px;display: flex;align-items: center;justify-content: right;">
              <MIcon :src="isOpenEye ? eyeIcon[0] : eyeIcon[1]" @click="openLcd(obj.value)"></MIcon>
            </div>
          </td>
          <td class="value" v-if="obj.field == '标识码'" style="display: flex;">
            <div style="flex: 1 1 100px;">

            </div>
            <div style="width: 26px;height: 26px;display: flex;align-items: center;justify-content: right;">
              <MIcon :src="eyeIcon[2]"></MIcon>
            </div>
          </td>
        </tr>
      </table>
      <MModal v-model="isOpenEye" title="液晶屏信息" :onCancel="handleCancel" :footerShow="false">
        <table id="attributeTable" class="mtable">
          <tr v-for="(obj, index) in lcdInfo" :key="index" class="mtr">
            <td class="field">{{ obj.field }}</td>
            <td class="value">
              {{ obj.value }}
            </td>
          </tr>
        </table>
      </MModal>

    </main>
    <footer>
      <div style="text-align: center;" v-if="!isDisable">
        <MButton @click="toOrder">去下单</MButton>
      </div>
    </footer>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import MBreadcrumb from "../../components/MBreadcrumb.vue"
import MTitle from "../../components/MTitle.vue"
//import MList from "../../components/MList.vue"
import MButton from "../../components/MButton.vue"
import MIcon from "../../components/MIcon.vue"
import MModal from "../../components/MModal.vue"

//import MTag from "../../components/MTag.vue"
import axios from "../../axios/axios"
import openEye from "../../../public/image/openEye.png"
import closeEye from "../../../public/image/closeEye.png"
import qrCode from "../../../public/image/qrCode.png"
export default {
  name: 'TVSelect',
  components: {
    MBreadcrumb,
    MTitle,
    MIcon,
    MButton,
    MModal,
    //MIcon
  },
  setup() {
    const eyeIcon = [openEye, closeEye, qrCode]
    const base64Image = ref("")
    const breadcrumbItem = ref(
      {
        key: "0",
        title: '赋码管理',
        children: {
          key: "0-0",
          title: '电视选购',
        }
      })
    //const userId="12121"
    const MListItem = ref([
      { "field": "产品型号", "value": "" },
      { "field": "产品名称", "value": "" },
      { "field": "USB 2.0", "value": "" },
      { "field": "USB 3.0", "value": "" },
      { "field": "HDMI 2.1", "value": "" },
      { "field": "HDMI 2.0", "value": "" },
      { "field": "液晶屏", "value": "" },
      { "field": "标识码", "value": "" },
      { "field": "单价", "value": "" },
    ])
    const TVList = ref([])
    const TVSelectNum = ref(0)
    const params = ref([])
    const userId = ref("")
    const isOpenEye = ref(false)
    const lcdInfo = ref([])
    const isDisable = ref(false)

    const openLcd = (value) => {
      if (!isOpenEye.value) {
        axios.get("/lcd/selectbymodel?productModel=" + value).then(res => {
          isOpenEye.value = true
          lcdInfo.value = [
            { "field": "分辨率", "value": res.data.Data.resolution },
            { "field": "技术", "value": res.data.Data.technology },
            { "field": "刷新率", "value": res.data.Data.refreshrate },
            { "field": "色域", "value": res.data.Data.colorgamut },
            { "field": "视角", "value": res.data.Data.angleview },
            { "field": "对比度", "value": res.data.Data.contrastratio },
          ]
        })
      } else {
        isOpenEye.value = false
      }

    }
    const handleCancel = () => {
      isOpenEye.value = false
    }
    const turnLeft = () => {
      var num = TVSelectNum.value
      if (num !== 0) {

        MListItem.value = makeItem(num - 1)
        base64Image.value = TVList.value[num - 1].base64
        TVSelectNum.value = num - 1
      }
    }
    const turnRight = () => {
      var num = TVSelectNum.value
      if (num !== TVList.value.length - 1) {
        MListItem.value = makeItem(num + 1)
        base64Image.value = TVList.value[num + 1].base64
        TVSelectNum.value = num + 1
      }
    }
    const makeItem = (number) => {
      return [
        { "field": "产品型号", "value": TVList.value[number].productmodel },
        { "field": "产品名称", "value": TVList.value[number].productname },
        { "field": "USB 2.0", "value": TVList.value[number].usb2number },
        { "field": "USB 3.0", "value": TVList.value[number].usb3number },
        { "field": "HDMI 2.1", "value": TVList.value[number].hdmi21number },
        { "field": "HDMI 2.0", "value": TVList.value[number].hdmi20number },
        { "field": "液晶屏", "value": TVList.value[number].lcdmodel },
        { "field": "标识码", "value": TVList.value[number].productidcode },
        { "field": "单价", "value": TVList.value[number].productprice },
      ]
    }
    const toOrder = () => {
      axios.get("/step/sendstep?type=orderNeed&userId=" + params.value.get('userId') + "&trainingId=" + params.value.get('trainingId'))
    }
    onMounted(() => {
      // 获取 URL 参数
      const param = new URLSearchParams(window.location.search);
      params.value = param
      if (param.has('userId')) {
        userId.value = param.get('userId');
      }
      if (param.has('isDisable')) {
        isDisable.value = param.get('isDisable') === "true"
      }
      // var data = []
      // for (var i = 0; i < 14; i++) {
      //   data.push("")
      // }
      // ProductInfo.value = data
      axios.get('/tv/select')
        .then(response => {
          var info = response.data.Data
          var dataList = [
            { "field": "产品型号", "value": info[0].productmodel },
            { "field": "产品名称", "value": info[0].productname },
            { "field": "USB 2.0", "value": info[0].usb2number },
            { "field": "USB 3.0", "value": info[0].usb3number },
            { "field": "HDMI 2.1", "value": info[0].hdmi21number },
            { "field": "HDMI 2.0", "value": info[0].hdmi20number },
            { "field": "液晶屏", "value": info[0].lcdmodel },
            { "field": "标识码", "value": info[0].productidcode },
            { "field": "单价", "value": info[0].productprice },
          ]
          TVList.value = info
          base64Image.value = info[0].base64
          MListItem.value = dataList
        })
    });
    return {
      base64Image,
      breadcrumbItem,
      MListItem,
      eyeIcon,
      isOpenEye,
      lcdInfo,
      isDisable,
      openLcd,
      turnLeft,
      turnRight,
      toOrder,
      handleCancel
    };
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  text-align: center;
  height: 10%;
}

.mtr {
  display: flex;
  flex-wrap: wrap;
  /* 允许子元素换行 */
  align-items: flex-start;
}

main {
  flex: 1;
}

.mtable {
  width: 100%;
  font-size: 13px;

}

.field {
  text-align: left;
  padding: 4px 0;
  flex: 1 1 60px;
  word-break: break-word;
  /* 允许长单词换行 */
  overflow-wrap: break-word;
  min-width: 0;
  /* 确保内容可以缩小 */
  height: 26px;
  line-height: 26px;
}

.value {
  text-align: right;
  padding: 4px 0;
  flex: 1 1 160px;
  word-break: break-word;
  /* 允许长单词换行 */
  overflow-wrap: break-word;
  min-width: 0;
  height: 26px;
  line-height: 26px;
  /* 确保内容可以缩小 */
}
</style>
